<template>
	<view>
		<view class="cardList">
			<view class="" style="color: #0000FF;text-align: right;" @click="navigateTo('/pages/mine/deposit/index')">
				记录
			</view>
			<view class="cardTitle">
				到账银行卡
			</view>
			<view class="card" @tap="showBanner">
				<view class="cardName" v-if="bankCode">
					<bank-logo :key="bankCode" :bankCode="bankCode" :bankName="bankName" :cardCode="cardNumber"></bank-logo>
					<view class="margin-left:10px">{{bankName}}</view>
				</view>
				<view class="" v-if="radiolist1.length<=0"  @click="navigateTo('/pages/promotion/cardList/add?name='+title)">
					+添加银行卡
				</view>
				<view class="cardRight">
					<image style="width: 50rpx;height: 50rpx;" src="../../promotion/static/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="uni-banner" style="background:#FFFFFF;" v-if="bannerShow">
			<!-- x -->
			<view class="title" style=" text-align:center;padding:20upx;border-bottom: 1upx solid #fff;" @tap="closeBanner">
				<view class="">
					选择提现银行卡
				</view>
				<text class="iconClose">x</text>
			</view>
			<!-- 图 -->
			<view style="height:calc(60vh - 60px);overflow: scroll;">
				<view class="u-page">
					<ul style="padding-left: 40rpx;" v-if="radiolist1.length>0">
						<u-radio-group style="display: flex;flex-direction: column;" v-model="bankCardId" placement="column" @change="groupChange">
							<li style="padding: 0 0;display: flex;align-items: center;" v-for="(item, index) in radiolist1" :key="index">
								<!-- <image style="margin-right:20rpx;width: 60rpx;height: 60rpx;border-radius: 50%;" src="../../../static/img/used.png"
								 mode=""></image> -->
								<bank-logo :bankCode="item.bankCode" :bankName="item.bankName" :cardCode="item.cardNumber"></bank-logo>
								<text style="flex: 1;">{{item.bankName}}({{item.idcard | cardCode}})</text>
								<u-radio active-color="#ff6b35" :customStyle="{marginBottom: '8px'}" :label="item.bankName" :name="item.id"
								 @change="radioChange">
								</u-radio>
							</li>
						</u-radio-group>
					</ul>
					<view class="-goods-desc" v-else>
						<view class="submit" @click="navigateTo('/pages/promotion/cardList/add?name='+title)">添加银行卡</view>
					</view>
				</view>
			</view>


		</view>

		<!-- 做黑色阴影颜色 -->
		<view class="uni-mask" @tap="closeBanner" v-if="bannerShow"></view>
		<view class="-list">

			<view class="title">提现金额</view>
			<view class="content">
				<view class="price">
					<span> ￥</span>
					<u-input v-model="price" placeholder="点击输入提现金额" type="number" />
				</view>
			</view>
			<!-- <view class="all">
				<view style="font-size: 24rpx; color: #999">可提现金额<span>{{ walletNum | unitPrice }}</span>元</view>
				<span @click="handleAll" :style="{ color: $mainColor }">全部</span>
			</view> -->
			<view class="tips">
				<!-- 最低提现金额为1.00元 -->
				
				最低提现金额为100.00元;最高单笔49980.00元;提现费率：单笔两元+0.2%
			</view>

		</view>
		<view class="subject" style="padding: 10px 15px;
    box-sizing: border-box;display: flex;">
			<span>备注：</span><textarea maxlength="20" v-model="subject" value="" placeholder="点击填写备注" auto-height />
			<!-- <u--textarea v-model="subject" placeholder="点击填写备注" autoHeight></u--textarea> -->
			</view>
		<view class="submit" @click="cashd">提现</view>
	</view>
</template>
<script>
	import {
		getUserWallet,
		withdrawalApply
	} from "@/api/members";
	import * as API_CARD from "@/api/card";
	import * as API_WITHDRAWAL from "@/api/withdrawal";
		import bankLogo from "@/components/bank-logo/bank-logo.vue";
	import storage from "@/utils/storage.js";
		import BIN from "bankcardinfo"
	export default {
		components: {
					"bank-logo": bankLogo
				},
		data() {
			return {
				price: "",
				walletNum: 0,
				bannerShow: false,
				bankCardId:'',
				radiolist1: [],
				bankName: '',
				bankCode:'',
				cardNumber:'',
				subject:'',
				title: "添加银行卡",
			};
		},
		async mounted() {
			let result = await getUserWallet(); //预存款
			this.walletNum = result.data.result.memberWallet;
		},
		// 监听页面返回
		onBackPress() {
			if (this.bannerShow) {
				this.bannerShow = false;
				return true;
			}
		},
		onLoad() {
			this.radiolist1=[];
			// this.defaultCardMTH();
			this.getCardListMTH()

		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			},
			closeBanner: function() {
				this.bannerShow = false;
			},
			showBanner: function() {
				this.bannerShow = true;
			},
			cashd() {
				this.price = this.price + "";
				      if (this.$u.test.amount(parseInt(this.price))) {
				        withdrawalApply({ price: this.price,bankCardId:this.bankCardId, }).then((res) => {
				          if (res.data.success) {
				            uni.showToast({
				              title: "提现成功!",
				              duration: 2000,
				              icon: "none",
				            });
				            setTimeout(() => {
				              // uni.navigateBack({
				              //   delta: 1,
				              // });
							  uni.navigateTo({
							  	url: "/pages/mine/deposit/index",
							  });
				            }, 1000);
				          }
				        });
				      } else {
				        uni.showToast({
				          title: "请输入正确金额",
				          duration: 2000,
				          icon: "none",
				        });
				      }
				// this.price = this.price + "";
				// if (this.$u.test.amount(parseInt(this.price))) {				
				// 	API_WITHDRAWAL.submitWithdrawalAPI({
				// 		flowPrice:this.price,
				// 		bankCardId:this.bankCardId,
				// 		subject:this.subject,
				// 		memberId:storage.getUserInfo().id
				// 	}).then(res => {
				// 		if (res.data.success) {
				// 			uni.showToast({
				// 				title: "提现成功!",
				// 				duration: 2000,
				// 				icon: "none",
				// 			});
				// 			setTimeout(() => {
				// 				uni.navigateBack({
				// 					delta: 1,
				// 				});
				// 			}, 1000);
				// 		}
				// 	}).catch(err => {
				// 		console.log((err))
				// 	})
				// } else {
				// 	uni.showToast({
				// 		title: "请输入正确金额",
				// 		duration: 2000,
				// 		icon: "none",
				// 	});
				// }
			},
			handleAll() {
				this.price = this.walletNum;
			},

			groupChange(n) {
				// console.log('groupChange', n);
			},
			radioChange(n) {
				this.radiolist1.forEach(item => {
					if (item.id == n) {
						this.bankName = item.bankName;
						this.bankCode= item.bankCode,
						this.cardNumber= item.cardNumber,
						this.closeBanner()
					}
				})
			},
			// 默认列表
			getCardListMTH() {
				let that=this;
				API_CARD.getCardList().then(res => {
					if (res.data.code == 200) {
						let dataList = res.data.result.records;
						this.bankName = res.data.result.records[0].bankName;
						this.bankCode= res.data.result.records[0].bankAbbreviation,
						this.cardNumber= res.data.result.records[0].cardNumber,
						this.bankCardId = res.data.result.records[0].id;
						res.data.result.records.forEach((item, index) => {
							BIN.getBankBin(item.cardNumber)
								.then(function(data) {
									dataList[index] = Object.assign(dataList[index], data)								
									that.radiolist1.push(dataList[index])
								   console.log(that.radiolist1)
								})
								.catch(function(err) {
									console.log(err)
								})
							// API_CARD.getCardColor(item.id).then(res => {
							// 	if (res.statusCode == 200) {
							// 		dataList[index].bankLogo = res.data.result.bankLogo;
							// 		this.radiolist1 = dataList;
							// 	}
							// })
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 默认银行卡
			defaultCardMTH() {
				API_CARD.defaultCardAPI(storage.getUserInfo().id).then(res => {
					console.log(res.data.result)
					if (res.data.code==200) {
						this.bankName = res.data.result.bankName;
						this.bankCode= res.data.result.bankAbbreviation,
						this.cardNumber= res.data.result.cardNumber,
						this.bankCardId = res.data.result.id;
						this.getCardListMTH();

					}
				}).catch(err => {
					console.log(err)
				})
			},
		},
		mounted() {

		}
	};
</script>
<style lang="scss" scoped>
	@import "./style.scss";

	.tips {
		font-size: 24rpx;
		color: #999;
	}

	li {
		list-style: none;
	}

	::v-deep .u-input__input {
		font-size: 35rpx !important;
	}

	.all {
		display: flex;
		align-items: center;

		span {
			margin-left: 20rpx;
		}
	}

	.cardList {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.card {
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.cardName {
			display: flex;
			align-items: center;
		}

		.cardRight {
			img {
				height: 50rpx;
				width: 50rpx;
			}
		}
	}

	/* 弹出层形式的广告 */
	.uni-banner {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 60vh;
		// margin-top: -400upx;
		border-radius: 55rpx 55rpx 0 0;
		z-index: 99;
	}

	.uni-mask {
		z-index: 1;
		background: rgba(0, 0, 0, 0.6);
	}

	.title {
		position: relative;

		.iconClose {
			position: absolute;
			right: 50rpx;
			top: 20upx;
		}
	}

	// 弹出框列表
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
	textarea{
		min-height: 60px;
		background-color: #fff;
		border-radius: 3px;
		padding: 5px;
		box-sizing: border-box;
	}
	.subject span{
		margin-top: 10rpx;
	}
</style>
